<template>
  <div class="edit-page-wrap">
    <Head title="发票信息">
      <template #content>
        <el-form
          ref="ruleFormRef"
          :model="ruleForm"
          :rules="rules"
          label-width="150px"
          class="edit-form-wrap"
        >
          <el-form-item label="发票形式" prop="ticketType">
            <el-radio-group
              v-model="ruleForm.ticketType"
              v-for="(item, index) in optionsS.ticketTypeData"
              :key="index"
            >
              <el-radio :label="item.value">{{ item.label }}</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="公司名称" prop="companyName">
            <el-input
              v-model.trim="ruleForm.companyName"
              maxlength="200"
              placeholder="请输入公司名称"
              clearable
            />
          </el-form-item>
          <el-form-item label="税号" prop="taxNumber">
            <el-input
              v-model.trim="ruleForm.taxNumber"
              placeholder="请输入税号"
              maxlength="20"
              clearable
            />
          </el-form-item>
          <el-form-item label="开户行名称" prop="bankName">
            <el-input
              v-model.trim="ruleForm.bankName"
              placeholder="请输入开户行名称"
              maxlength="200"
              clearable
            />
          </el-form-item>
          <el-form-item label="开户行账号" prop="bankAccount">
            <el-input
              v-model.trim="ruleForm.bankAccount"
              placeholder="请输入开户行账号"
              maxlength="200"
              clearable
            />
          </el-form-item>
          <el-form-item label="注册地址" prop="address">
            <el-input
              v-model.trim="ruleForm.address"
              placeholder="请输入注册地址"
              maxlength="200"
              clearable
            />
          </el-form-item>
          <el-form-item label="电话" prop="telephone">
            <el-input
              v-model.trim="ruleForm.telephone"
              maxlength="20"
              placeholder="请输入电话"
              clearable
            />
          </el-form-item>
        </el-form>
      </template>
    </Head>
    <div class="edit-line"></div>
    <div class="edit-btn-wrap">
      <el-button type="primary" plain @click="back">取消</el-button>
      <el-button type="primary" v-btnAntiShake="onSubmit">保存</el-button>
    </div>
  </div>
</template>

<script lang="ts" setup>
import type { FormInstance, FormRules } from 'element-plus';
import Head from '@/components/head/index.vue';
import { ticketGetById, ticketUpdate } from '@/service/apis/financial';
import { queryDicByParent } from '@/service/apis/api';
import { IS_INTEGER } from '@/utils/verify';

const router = useRouter();
const route = useRoute();
const {
  query: { id },
} = route;
const ruleFormRef = ref<FormInstance>();

let optionsS = reactive({
  ticketTypeData: [] as any,
});

// 字典
queryDicByParent({ listDtos: ['ticketType'] }).then((res: any) => {
  optionsS.ticketTypeData = res.ticketType;
});

let ruleForm: any = reactive({
  id: '',
  companyName: '',
  ticketType: undefined as unknown,
  taxNumber: '',
  bankName: '',
  supPower: '',
  bankAccount: '',
  address: '',
  telephone: '',
});

const rules = reactive<FormRules>({
  companyName: [{ required: true, message: '请输入公司名称', trigger: 'blur' }],
  ticketType: [
    { required: true, message: '请选择发票形式', trigger: 'change' },
  ],
  taxNumber: [{ required: true, message: '请输入税号', trigger: 'blur' }],
  bankName: [{ required: true, message: '请输入开户行名称', trigger: 'blur' }],
  bankAccount: [
    { required: true, message: '请输入开户行账号', trigger: 'blur' },
    {
      pattern: IS_INTEGER,
      message: '请输入数字',
      trigger: 'blur',
    },
  ],
  address: [{ required: true, message: '请输入注册地址', trigger: 'blur' }],
  telephone: [
    { required: true, message: '请输入电话', trigger: 'blur' },
    {
      pattern: IS_INTEGER,
      message: '请输入数字',
      trigger: 'blur',
    },
  ],
});

// 返回
const back = () => {
  router.go(-1);
};

// 编辑回填数据
if (id) {
  ticketGetById(id).then((res: any) => {
    if (res) {
      for (const key in ruleForm) {
        if (res[key]) {
          ruleForm[key] = res[key];
        }
      }
      ruleForm.ticketType =
        res.ticketType?.toString() || (undefined as unknown);
    }
  });
}

// 新增/修改提交
const emit = defineEmits(['clear-cache']);
const onSubmit = async () => {
  if (!ruleFormRef.value) return;
  try {
    await Promise.all([ruleFormRef.value.validate()]);
  } catch (fields: any) {
    for (const key in ruleForm) {
      if (fields[key]) {
        ruleFormRef.value.scrollToField(key);
        break;
      }
    }
    return;
  }
  console.log('ruleForm---', ruleForm);
  if (id) {
    ruleForm.id = id;
    ticketUpdate(ruleForm).then((res: any) => {
      emit('clear-cache');
      back();
    });
  }
};
</script>
<style lang="scss">
.main-wrap .edit-page-wrap .edit-form-wrap .el-input {
  margin: 4px;
}
</style>